<template>
	<view>
		<view class="flex align-center p-3 border-bottom border-light-secondary " >
			<image  src ="/static/default.jpg" 
			style="width: 180rpx;height: 180rpx;" class="rounded-circle" ></image>
			<view class="pl-3 flex flex-column flex-1 " >
				<view class="flex align-center" >
					<view class="flex-1 flex flex-column align-center justify-center " >
						<text class="font-lg font-weight-bold " >1</text>
						<text class="font text-muted " >获赞</text>						
					</view>
					
					<view class="flex-1 flex flex-column align-center justify-center " >
						<text class="font-lg font-weight-bold " >2</text>
						<text class="font text-muted " >关注</text>						
					</view>
					
					<view class="flex-1 flex flex-column align-center justify-center " >
						<text class="font-lg font-weight-bold " >3</text>
						<text class="font text-muted " >粉丝</text>						
					</view>
				</view>
				<view class="flex justify-center align-center" >
					<button type="primary" size="mini" class="bg-main w-100" style="width: 400rpx;" >关注</button>
				</view>
			</view>			
		</view>
		
		<!-- tab -->
		<view class="flex align-center" style="height: 100rpx;" >
			<view class="flex-1 flex align-center justify-center "
			 v-for="(item,index) in tabBars " :key="index" :class="index == tabIndex ? 
			 'font-weight-bold text-main':'font-md' " @click="changeTable(index)" >
			 {{item.name}}					
			</view>					
		</view>
		<template v-if="tabIndex === 0" >
			<view class="animated fast fadeIn " >
				<view class="p-3 border-bottom  " >
					<view class="font-md" >账号信息</view>
					<view class="font" >帐号年龄：12个月</view>
					<view class="font-md" > 帐号ID：1</view>
				</view>
				<view class="p-3 border-bottom  " >
					<view class="font-md" >个人信息</view>
					<view class="font" >星座：12个月</view>
					<view class="font" >职业：1</view>
					<view class="font" >故乡：1</view>
					<view class="font" >情感：1</view>
				</view>
			</view>
		</template>
		
		<template v-else >
			<view class="animated fast fadeIn " >
				<common-list v-for="(item,index) in list" :key="index" :item="item" :index="index" @follow = "follow"
				 @doSupport="doSupport"  ></common-list>
				 <divider></divider>
				 <load-more :loadmore ="loadmore" ></load-more>
			</view>
			
		</template>
	
	</view>
</template>

<script>
	const demo =[{
					  userpic:'/static/default.jpg',
					  username:'昵称',
					  txt_time:'2019-10-20 下午04:30',
					  isFollow:false,
					  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
					  txt_pic:'/static/demo/datapic/11.jpg',
					  support:{
						  type:"support",
						  support_count:1,
						  unsupport_count:2
					  },
					  comment_count:2,
					  share_num:2					 					    	
				},{
					  userpic:'/static/default.jpg',
					  username:'昵称',
					  txt_time:'2019-10-20 下午04:30',
					  isFollow:false,
					  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
					  //txt_pic:'/static/demo/datapic/11.jpg',
					  support:{
						  type:"support",
						  support_count:1,
						  unsupport_count:2
					  },
					  comment_count:2,
					  share_num:2					 					    	
				},{
					  userpic:'/static/default.jpg',
					  username:'昵称',
					  txt_time:'2019-10-20 下午04:30',
					  isFollow:false,
					  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
					  txt_pic:'/static/demo/datapic/11.jpg',
					  support:{
						  type:"unsupport",
						  support_count:1,
						  unsupport_count:2
					  },
					  comment_count:2,
					  share_num:2					    	
				},{
					  userpic:'/static/default.jpg',
					  username:'昵称',
					  txt_time:'2019-10-20 下午04:30',
					  isFollow:false,
					  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
					  txt_pic:'/static/demo/datapic/11.jpg',
					  support:{
						  type:"support",
						  support_count:1,
						  unsupport_count:2
					  },
					  comment_count:2,
					  share_num:2					    	
				  },
				  {
				  	  userpic:'/static/default.jpg',
				  	  username:'昵称',
				  	  txt_time:'2019-10-20 下午04:30',
				  	  isFollow:false,
				  	  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
				  	  txt_pic:'/static/demo/datapic/11.jpg',
				  	  support:{
				  		  type:" ",
				  		  support_count:1,
				  		  unsupport_count:2
				  	  },
				  	  comment_count:2,
				  	  share_num:2					    	
				    }];
   import commonList from "@/components/common/common_list.vue"
   import loadMore from "@/components/common/load_more.vue"
	export default {
		components:{
			commonList,
			loadMore
		},
		data() {
			return {
				tabIndex:0,
				tabBars:[{
					name:"首页"					
				},{
					name:"贴子",
					list:demo,
					loadmore:"上拉加载更多"
				},{
					name:"动态",
					list:demo,
					loadmore:"上拉加载更多"
				}]
			}
		},
		computed:{
			list(){
				return this.tabBars[this.tabIndex].list
			},
			loadmore(){
				return this.tabBars[this.tabIndex].loadmore
			}
		},
		methods: {
			changeTable(index){
				this.tabIndex = index
			},
			//关注
			follow(e){
			let list = this.tabBars[this.tabIndex].list
			list[e].isFollow = true
			uni.showToast({title:'关注成功'})	
			},
			//顶踩操作
			doSupport(e){				  
						 let list = this.tabBars[this.tabIndex].list
						   //拿到当前对象
						 let item = list[e.index]
						  let msg = e.type === 'support' ? '顶' : '踩'
						  //判断当前是否已经顶踩
						  if (item.support.type === ''){
							 //item.support.type = e.type
							 item.support[e.type+'_count']++
							 //return; 
						  }
						  /* this.list[e.index].support.type  = e.type
						  this.list[e.index].support[e.type+'_count']++ */
						  //console.log(e.type);
						 //之前顶了
						else if(item.support.type ==='support'&& e.type === 'unsupport' ){
							 //顶-1  
							 item.support.support_count--;
							 //踩+1
							 item.support.unsupport_count++;
						 }else if(item.support.type ==='unsupport' && e.type === 'support'){
							 //之前踩了
							 //顶+1
							 item.support.support_count++;
							 //踩-1
							 item.support.unsupport_count--;
						 }
						 item.support.type = e.type
						 uni.showToast({ title: msg + '成功'  });			
			}
			
		}
	}
</script>

<style>

</style>
